<script setup>

import {ref, defineEmits, defineProps} from 'vue'
import StepTitleDescription from '@/components/common/StepTitleDescription.vue'
import OneImage from '@/components/common/OneImage.vue'
import InchesInput from '@/components/common/InchesInput.vue'

const stepTitleDescription = ref({
  title: 'Step 3',
  description: 'What\'s your rod length?',
})

const OneImageData = ref({
  'src':'https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A6.svg?v=1745720977',
  'alt':"",
});

const emit = defineEmits(['submit'])

const getInches = (inches) => {
   emit('submit', inches)
}

</script>

<template>

  <div class="content-container">
    <StepTitleDescription :title-and-description="stepTitleDescription"/>

    <OneImage :OneImage="OneImageData"/>

    <InchesInput @submit="getInches"/>
  </div>


</template>

<style scoped>

.content-container {
   display:flex;
   flex-direction: column;
   align-items: center;
}

</style>